<!-- 这个文件是用来更新密码的组件 -->

<template>
    <div>
        <el-divider>更新密码</el-divider>
        <el-form v-model="userPassword" label-position="right" label-width="100px" style="margin: 30px;">
            <el-form-item label="新密码">
                <el-input type="password" v-model="userPassword.new1"></el-input>
            </el-form-item>
            <el-form-item label="重复新密码">
                <el-input type="password" v-model="userPassword.new2"></el-input>
            </el-form-item>
            <div>
                <el-button type="warning" style="width: 100px;" @click="closeChangePasswordDialog">取消</el-button>
                <el-button type="primary" style="width: 100px;" @click="changePassword">更新密码</el-button>
            </div>
        </el-form>
    </div>
</template>

<script>
    import axios from "axios"

    export default {
        name: "updatePassword",
        data: function() {
            return {
                userPassword: {
                    new1: "",
                    new2: ""
                }
            }
        },
        props: {
            // showAble: {
            //     required: true,
            //     type: Boolean,
            // }
        },
        methods: {
            closeChangePasswordDialog: function() {
                this.$emit("changePasswordDialog");
            },

            /**
             * @description 更改密码
             */
            changePassword: function() {
                var _this = this;

                if (this.checkNewPassword() === false) {
                    return undefined;
                }

                axios.post("http://127.0.0.1:8000/api/password/update/", JSON.stringify({
                        new_password: _this.userPassword.new1
                    }))
                    .then(function(response) {
                        if (response.data.status === 0) {
                            _this.$message({
                                message: "修改密码成功！",
                                type: "success"
                            })
                        } else {
                            _this.$message.error("修改密码失败！")
                        }
                    })
                    .catch(function(error) {
                        console.log(error);
                    })
            },

            /**
             * @description 检查需要更改的新密码是否一致
             */
            checkNewPassword: function() {
                if (this.userPassword.new1 === this.userPassword.new2) {
                    if (this.userPassword.new1.length >= 8) {
                        return true;
                    } else {
                        this.$message({
                            message: "密码长度太短，请重新设置",
                            type: "warning"
                        })
                    }
                } else {
                    this.$message({
                        message: "两次密码不一致",
                        type: "warning"
                    })
                }
                return false;
            }
        }
    }
</script>

<style>

</style>
